import { useEffect, useState } from "react";
import { Text, View, Image } from "@tarojs/components";
import { DatePicker } from "@nutui/nutui-react-taro";
import Tabs from "../../components/Tabs";
import InfiniteLoading from "../../components/InfiniteLoading";
import InfiniteLoadingFoot from "../../components/InfiniteLoadingFoot";
import usePage from "../../hooks/usePage";
import { getReservationInfo } from "../../api/yuyue";
import { iconRightGray,arrowRightGrayIcon } from "../../assets/files";
import dayjs from "dayjs";
import Taro from "@tarojs/taro";
import { pageUserExam } from "../../api/ceshi";
import { navigateTo } from "../../common/_";
import "./index.scss";

definePageConfig({
  navigationBarTitleText: "测试记录",
  disableScroll: true,
});

export default function Record() {
  const [timeStartVisible, setTimeStartVisible] = useState(false);
  const [timeEndVisible, setTimeEndVisible] = useState(false);
  const [timeType, setTimeType] = useState();
  const [params, setParams] = useState({ 
    // startDate: dayjs().subtract(5, 'day').format('YYYY-MM-DD'),
    // endDate: dayjs().add(1, 'day').startOf('day').format('YYYY-MM-DD'),
   });
  const { listData, refreshing, empty, loadMore, onPull, onLoad } = usePage({
    request: pageUserExam,
    params,
  });

  const navigateToDetails = (item) => {
    navigateTo('/pages/text-record-detail/index',{
      userExamId:item.id
    })
  };

  function selectTime(type) {
    setTimeType(type);
    if (type === "start") {
      setTimeStartVisible(true);
    } else {
      setTimeEndVisible(true);
    }
  }

  function confirmTime(values, options) {
    console.log(values, options);
    let data = ""
    if( values.join("-").includes("02-31") || values.join("-").includes("02-30")){
      data = dayjs().year()+'-02-01'
    }else{
      data = values.join("-")
    }
    if (timeType === "start") {
      setParams({
        ...params,
        startDate: data
      })
    } else {
      setParams({
        ...params,
        endDate: data
      })
    }
  }

  return (
    <View className={"reservation-record-page"}>
      {/* <Tabs
        tabs={TABS}
        value={params.ruleType}
        onClick={(tab) => setParams({ ruleType: tab.value })}
      /> */}

      {/* <View className="timeWrap">
          <Text className="timeText" onClick={() => selectTime("start")}>
            {params.startDate}
          </Text>
          <Image src={arrowRightGrayIcon} className="downIcon" />
          <Text className="zhi">至</Text>
          <Text className="timeText" onClick={()=> selectTime('end')}>{params.endDate}</Text>
          <Image src={arrowRightGrayIcon} className="downIcon" />
        </View> */}

      <View className={"list-wrapper"}>
        <InfiniteLoading
          empty={empty}
          onLoad={onLoad}
          onRefresh={onPull}
          refreshing={refreshing}
        >
          {listData?.map((item) => (
            <View
              className={"list-item"}
              onClick={() => navigateToDetails(item)}
            >
              <View className="qtype">
                <Text>{item.questionTypeName}</Text>
              </View>
              <View className="tie">
                <View className="iteWrap" style={{flex:1}}>
                  <Text className="tit"> 测试分数：</Text>
                  <Text className="ites">
                    {item.scoreTotal}分
                  </Text>
                </View>
                <Text className="rightDes">
                  {item.startTime}
                </Text>
                <Image className="rightIcon" src={iconRightGray} />
              </View>
              
            </View>
          ))}
          {listData?.length > 0 && <InfiniteLoadingFoot state={loadMore} />}
        </InfiniteLoading>
      </View>


      <DatePicker
        title="选择日期"
        visible={timeStartVisible}
        defaultValue={new Date(params.startDate)}
        showChinese
        onClose={() => {
          setTimeStartVisible(false);
        }}
        onConfirm={(options, values) => confirmTime(values, options)}
      />

      <DatePicker
        title="结束日期"
        visible={timeEndVisible}
        defaultValue={new Date(params.endDate)}
        showChinese
        onClose={() => { setTimeEndVisible(false)}}
        onConfirm={(options, values) => confirmTime(values,options)}
      />
    </View>
  );
}
